<template>
    <div class="components-container">
        <!-- 编辑 -->
        <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="700">
            <h3>{{title}} </h3>
            <div style="margin:10px 20px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">补贴日期</label>    
                    <div class="layui-input-inline backcolor">
                        <el-date-picker v-date type="date" v-model="regList.SBYDATE" :disabled='isINFO'></el-date-picker>
                    </div>
                </div>
            </div>
           
            </div>
            <div :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
            <table class="layui-table" style="border-spacing: 0;">
                 <colgroup>
                    <col>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>员工ID</th>
                        <th>补贴类型</th>
                        <th>补贴金额</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody ref='inputs'>
                    <tr class="allRow" v-for="(chl,index) in chlList">
                        <td>
                            <!-- @change="chaSelect($event)" -->
                            <el-select  ref="select" v-model="chl.SBLSTAID" clearable    
                                :filter-method="chaFilter" :disabled='isINFO' filterable>
                                <el-option v-for="item in QueryNolstaff" :key="item.label" :label="item.value" :value="item.label">
                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <!-- @visible-change="Goodname(chl,$event)" -->
                            <el-select ref="selects" v-model="chl.SBLCODNAME" clearable   
                                :filter-method="chaFilter" :disabled='isINFO' filterable>
                                <el-option v-for="item in GetSbsType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-input v-model="chl.SBLMONEY" :disabled='isINFO'>
                            </el-input>
                        </td>
                        <td>
                            <el-input v-model="chl.SBLREMARK" :disabled='isINFO'>
                            </el-input>
                        </td>
                        <td>
                            <button class="layui-btn layui-btn-small layui-btn-normal" @click="remove(index)" :disabled='isINFO'>
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4"></td>
                    <td>
                    <button class="layui-btn layui-btn-small layui-btn-normal" @click="insert()" :disabled='isINFO'>
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    </td>
                </tr>
                </tfoot>
            </table>
            </div>
            <div class="layui-form-item btnCenter">
                <el-button @click="cancels">取消</el-button>
                <el-button type="primary" @click="submit" :loading="this.$store.state.isloading" v-if="this.title!=='补贴登记详情'">提交</el-button>
            </div>
        </sweet-modal>
    </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>


</style>
<script>
    import sweetModal from "@/components/sweetModal";
    import dataTable from "@/components/Table/DataTable";
    import apiBase from "@/api/apiBase.js";
    import {
        formatDate,
        timeStringToDate
    } from "@/utils/date.js";
    import {
        manage
    } from "@/mixins/managePage.js";
    const ADD = "新增";
    const MODIFY = "修改";
    const DELETE = "删除";
    const INFO = "详情";
    export default {
        name: "assUseMain",
        mixins: [manage],
        data() {
            return {
                isINFO: true,//详情页面全部不能修改
                maxHeight: 500,
                chlList: [],
                GetSbsType: [], //获取补贴类型
                QueryNolstaff: [], //获取员工id
                ids: null,
                regList: {
                    // SBSORGID: null,	   //单位编号
                    // SBSTYPE: null, 	   //补贴方式	   A-固定值，B-百分比
                    // SBSCHECKUSR: null,  // 经办人	  
                    SBYDATE: null, //经办日期
                },
                chl: {
                    SBLSTAID: null,	   //员工ID	  
                    SBLCODNAME: null,   //补贴类型
                    SBLMONEY: null,  // 补贴金额
                    SBLREMARK: null,  // 备注
                },
            }
        },
        methods: {
            //新增行
            insert() {
            for (let index in this.chlList) {
                let chl = this.chlList[index];
                if (chl.SBLSTAID === null || chl.SBLCODNAME === null || chl.SBLMONEY === null || chl.SBLREMARK === null) {
                    this.$message({
                    type: "error",
                    message: `第${parseInt(index) + 1}行信息不能有空!`
                    });
                    return false;
                }
                }
                this.chlList.push(JSON.parse(JSON.stringify(this.chl)));
                return true;
            },
            //删除行
            remove(index) {
                this.chlList.splice(index, 1);
            },
             //自定义筛选
            chaFilter(val) {
                this.chaList = JSON.parse(JSON.stringify(this.allCharge));
                if (val) {
                if (val.length > 0)
                    this.chaList = this.allCharge.filter(item => {
                    return (
                        item.DPGNAME.indexOf(val) > -1 ||
                        item.DPGCODE.toLowerCase().indexOf(val.toLowerCase()) > -1
                    );
                    });
                }
            },
            open(order,id) {
                this.order = order;
                this.ids = id;
                switch (this.order) {
                    case ADD:
                        this.title = "补贴登记新增";
                        this.dataRepeat();
                        this.chlList = [];
                        this.isINFO = false;
                        this.insert();
                        this.$refs.dialog.open();
                        break;
                    case MODIFY:
                        this.title = "补贴登记修改";
                        this.chlList = [];
                        Object.assign(this.$data.regList, this.$options.data().regList);
                        this.isINFO = false;
                        this.dataInfo(id);
                        this.$refs.dialog.open();
                        break;
                    case INFO:
                        this.title = "补贴登记详情";
                        this.isINFO = true;
                        this.dataInfo(id);
                        this.$refs.dialog.open();
                        break;
                    default:
                }
            },
            //提交
            submit() {
                this.$store.state.isloading = true;
                switch (this.order) {
                    case ADD:
                        this.dataAdd();
                    break;
                    case MODIFY:
                        this.dataModify();
                        break;
                    default:
                }
            },
             //获取员工id
            QueryNolstaffs() {
                let data = {};
                apiBase.DoService(
                    data,
                    apiBase.getApiAdress().Staff.QueryNolstaff,
                    res => {
                        let assTypeData = res.data.content,
                            legendsUsersData = assTypeData.map(item => ({
                                label: item.STAID,
                                value: item.STANAME
                            }));
                        this.QueryNolstaff = legendsUsersData;
                    });
            },
             //获取补贴类型
            GetSbsTypes() {
                let data = {};
                apiBase.DoService(
                    data,
                    apiBase.getApiAdress().Code.GetSbsType,
                    res => {
                        let assTypeData = res.data.content,
                            legendsUsersData = assTypeData.map(item => ({
                                label: item.CodeName,
                                value: item.CodeValue
                            }));
                        this.GetSbsType = legendsUsersData;
                    });
            },
           
            //数据重置
            dataRepeat() {
                this.ashUseData = {};
                this.regList = {};
            },
            //新增
            dataAdd() {
                let chlList = JSON.parse(JSON.stringify(this.chlList));
                let Data = JSON.parse(JSON.stringify(this.regList));
                if (Data.SBYDATE)
                    Data.SBYDATE = formatDate(Data.SBYDATE, "yyyyMMdd");
                if (chlList.length > 0) {
                    Data.list_Sbl = chlList;
                }
                apiBase.DoService(Data, apiBase.getApiAdress().Subsidy.CreateSby, res => {
                    this.$message({
                        type: "success",
                        message: "新增成功!"
                    });
                    this.cancels();
                    this.refreshData();
                });
            },
           
            //详情
            dataInfo(id) {
                var data = {
                    SBYID: id
                };
                apiBase.DoService(
                    data,
                    apiBase.getApiAdress().Subsidy.DetailSby,
                    res => {
                        this.regList.SBYDATE = res.data.content.SBYDATEDESC;
                        this.chlList = res.data.content.list_Sbl;
                    });
            },
          
            //修改
            dataModify() {
                let chlList = JSON.parse(JSON.stringify(this.chlList));
                let Data = JSON.parse(JSON.stringify(this.regList));
                if (Data.SBYDATE)
                    Data.SBYDATE = formatDate(Data.SBYDATE, "yyyyMMdd");
                if (chlList.length > 0) {
                    Data.list_Sbl = chlList;
                }
                Data.SBYID = this.ids;
                apiBase.DoService(
                    Data,
                    apiBase.getApiAdress().Subsidy.ModifySby,
                    res => {
                        this.refreshData();
                        this.$refs.dialog.close();
                    });
            },
          
            // 页面关闭
            cancels() {
                this.$refs.dialog.close();
            },
            refreshData() {
                this.$emit("refreshData");
            },
        },
        created() {
            this.QueryNolstaffs();
            this.GetSbsTypes();
        },
        components: {
            sweetModal
        }
    };
</script>

